<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="nav">
		<img class="nav_logo" src="imgs/logo_baidu.jpg">
		<!-- <h1>网站一级标题</h1> -->
		<div class="nav_list">
			<ul class="nav_href">
				<li><a href="#">导航链接一</a></li>
				<li><a href="#">导航链接二</a></li>
				<li><a href="#">导航链接三</a></li>
				<li><a href="#">导航链接四</a></li>
			</ul>
		</div>
		
	</div>

	<div class="articleAll">

		<div class="article one">
			<h2 class="title_first">文章一级标题</h2>
			<h3 class="title_second">文章二级标题</h3>
			<p class="authorInfo">文章作者&nbsp;文章发表时间</p>
			<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这里有个<strong>粗体字</strong>,这是一个很长很长的段落。
			</p>
			<img src="imgs/timg.jpg" alt="">
			<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击打开后新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这里有个<strong>粗体字</strong>,这是一个很长很长的段落。</p>
				<br/>
			</div>

			<div class="article two">
				<h2 class="title_first">另一篇文章一级标题</h2>
				<h3 class="title_second">文章二级标题</h3>
				<p class="authorInfo">文章作者&nbsp;文章发表时间</p>
				<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
					这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
					这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这里有个<strong>粗体字</strong>,这是一个很长很长的段落。
				</p>

				<img src="imgs/timg.jpg" alt="">
				<ul style="list-style-type: none;">
					<li>列表项目一</li>
					<li>列表项目二</li>
					<li>列表项目三</li>
					<li>列表项目四</li>
				</ul>
			</div>

			<div class="article three">
				<h2>图片</h2>
				<div class="picframe">
					<span>好看的图片</span>
					<img src="imgs/timg.jpg" alt="">
				</div>
				<div class="picframe">
					<span>好看的图片</span>
					<img src="imgs/timg.jpg" alt="">
				</div>
				<div class="picframe">
					<span>好看的图片</span>
					<img src="imgs/timg.jpg" alt="">
				</div>
				<div class="picframe">
					<span>好看的图片</span>
					<img src="imgs/timg.jpg" alt="">
				</div>
			</div>

			<div class="article four">
				<h2 class="title_first">最后一篇文章一级标题</h2>
				<h3 class="title_second">文章二级标题</h3>
				<p class="authorInfo">文章作者&nbsp;文章发表时间</p>
				<ol>
					<li>排名1</li>
					<li>排名2</li>
					<li>排名3</li>
				</ol>

				<p>下面是一个表格，给表格加了一个bordre="1"的属性好让你看出是一个表格</p>
				<table border="1" width="300px">
					<tr>
						<th>表头</th>
						<th>表头</th>
						<th>表头</th>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="">操作</a></td>
					</tr>
					<tfoot>
						<tr>
							<td>总计</td>
							<td colspan="2">1000</td>
						</tr>
					</tfoot>

				</table>
			</div>
	</div>

	<div class="sidebar five">
			<div class="sidetitle">
				<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
			</div>

			<table>
				<tr>
					<td class="left"><span>请输入邮箱地址</span></td>
					<td class="right"><input type="text" name="" placeholder="这是一个文本输入框"></td>
				</tr>
				<tr>
					<td class="left"></td>
					<td class="right"><span class="point">邮箱地址请按要求格式输入</span></td>
				</tr>
				<tr>
					<td class="left"><span>请输入密码</span></td>
					<td class="right"><input type="password" name="" placeholder="这是一个文本输入框"></td>
				</tr>
				<tr>
					<td class="left"><span>请重复输入密码</span></td>
					<td class="right"><input type="password" name="" placeholder="这是一个文本输入框"></td>
				</tr>
				<tr>
					<td class="left"></td>
					<td class="right"><span class="point">密码请为6-16位英文数字</span></td>
				</tr>
				<tr>
					<td class="left"><span>性别</span></td>
					<td class="right">
						<input name="sex" type="radio" id="male" />
						<label for="male">男</label>
						<input name="sex" type="radio" id="female" />
						<label for="female">女</label>
					</td>
				</tr>
				<tr>
					<td class="left"><span>城市</span></td>
					<td class="right">
						<select>
							<option value ="beijing">北京</option>
							<option value ="shanghai">上海</option>
							<option value="tianjin">天津</option>
							<option value="nanjing">南京</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="left"><span>爱好</span></td>
					<td class="right">
						<input type="checkbox" value="hobbies" id="sports">
						<label for="sports">运动</label>
						<input type="checkbox" value="hobbies" id="art">
						<label for="art">艺术</label>
						<input type="checkbox" value="hobbies" id="science">
						<label for="science">科学</label>
					</td>
				</tr>
				<tr>
					<td class="left" valign="top"><span>个人描述</span></td>
					<td class="right" valign="top"><textarea rows="8" cols="30" placeholder="这是一个多行输入框,输入您的个人描述"></textarea></td>
				</tr>
			</table>
			<input class="submit" type="submit" value="确认提交">
	</div>

	<div class="copyright">
		<span>版权所有©</span>
	</div>

</body>
</html>